<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link
	rel="stylesheet"
	th:href="@{/css/bootstrap.min.css}"></link>
<link
	rel="stylesheet"
	th:href="@{/css/pages/userInfoList.css}" />
<script
	type="text/javascript"
	th:src="@{/js/jquery-1.11.3.min.js}"></script>
<script
	type="text/javascript"
	th:src="@{/js/bootstrap.min.js}"></script>
<script
	type="text/javascript"
	th:src="@{/js/pages/userInfoList.js}"></script>
<title>Getting Started: Serving Web Content</title>
<meta
	http-equiv="Content-Type"
	content="text/html; charset=UTF-8" />
</head>
<body>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button
					type="button"
					class="navbar-toggle collapsed"
					data-toggle="collapse"
					data-target="#bs-example-navbar-collapse-1"
					aria-expanded="false">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a
					class="navbar-brand"
					href="#">测试用例</a>
			</div>

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div
				class="collapse navbar-collapse"
				id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
					<li class="dropdown"><a
						href="#"
						class="dropdown-toggle"
						data-toggle="dropdown"
						role="button"
						aria-haspopup="true"
						aria-expanded="false">Dropdown <span class="caret"></span></a>
						<ul class="dropdown-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Something else here</a></li>
							<li
								role="separator"
								class="divider"></li>
							<li><a href="#">Separated link</a></li>
							<li
								role="separator"
								class="divider"></li>
							<li><a href="#">One more separated link</a></li>
						</ul></li>
				</ul>
				<form
					class="navbar-form navbar-left"
					role="search">
					<div class="form-group">
						<input
							type="text"
							class="form-control"
							placeholder="Search" />
					</div>
					<button
						type="submit"
						class="btn btn-default">Submit</button>
				</form>
			</div>
			<!-- /.navbar-collapse -->
		</div>
		<!-- /.container-fluid -->
	</nav>
	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-12">
				<table class="table table-hover">
					<caption class="text-center">用户信息一览</caption>
					<thead>
						<tr>
							<th>用户名</th>
							<th>用户生日</th>
							<th>Email</th>
							<th>用户性别</th>
						</tr>
					</thead>
					<tbody th:remove="all-but-first">
						<tr th:each="user :${userList}">
							<td th:text="${user.username}">Geek</td>
							<td th:text="${user.birthday}">Geek</td>
							<td th:text="${user.email}">Email</td>
							<td th:text="${user.sex}">Sex</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="col-sm-12">
				<fieldset>
					<legend>新增用户信息</legend>
					<form
						id="createUserInfoForm"
						class="form-horizontal">
						<div class="form-group">
							<label
								for="exampleInputEmail1"
								class="col-sm-2 control-label">用户名</label>
							<div class="col-sm-6">
								<input
									type="text"
									name="username"
									class="form-control"
									placeholder="不能为空！" />
							</div>
						</div>
						<div class="form-group">
							<label
								for="exampleInputEmail1"
								class="col-sm-2 control-label">邮箱</label>
							<div class="col-sm-6">
								<input
									type="text"
									name="email"
									class="form-control"
									placeholder="不能为空！" />
							</div>
						</div>
						<div class="form-group">
							<label
								for="exampleInputPassword1"
								class="col-sm-2 control-label">密码</label>
							<div class="col-sm-6">
								<input
									type="password"
									name="password"
									class="form-control"
									placeholder="Password" />
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-4 col-sm-offset-2">
								<button
									id="createUserInfoSubmitBtn"
									type="button"
									class="btn btn-default">提交</button>
							</div>
						</div>
					</form>
				</fieldset>
			</div>
			<div class="col-sm-12">
				<fieldset>
					<legend>查询用户数据</legend>
					<form id="findUserInfoForm" class="form-inline text-center">
						<div class="form-group">
							<label for="exampleInputName2">用户名</label> <input
								type="text"
								class="form-control"
								id="username"
								name="username"
								placeholder="Jane Doe" />
						</div>
						<div class="form-group">
							<label for="exampleInputEmail2">Email</label> <input
								type="text"
								class="form-control"
								id="email"
								name="email"
								placeholder="jane.doe@example.com" />
						</div>
						<div class="form-group">
							<label for="exampleInputEmail2">性别</label> <select
								name="sex"
								class="form-control">
								<option value="0">选项</option>
								<option value="man">man</option>
								<option value="woman">woman</option>
							</select>

						</div>
						<button
							type="submit"
							class="btn btn-primary" id="findUserInfoBtn"><span class="glyphicon glyphicon-search"></span>&nbsp;查询</button>
					</form>
					<hr/>
					<table class="table">
					<caption class="text-center">查询用户信息一览</caption>
					<thead>
						<tr>
							<th class="col-sm-3 text-center">用户名</th>
							<th class="col-sm-3 text-center">用户生日</th>
							<th class="col-sm-3 text-center">Email</th>
							<th class="col-sm-3 text-center">用户性别</th>
						</tr>
					</thead>
					<tbody id="findUserInfoTable"></tbody>
					</table>
					<hr/>
					<form id="findUsernameForm" class="form-inline text-center">
						<div class="form-group">
							<label for="exampleInputName2">真是名称</label> <input
								type="text"
								class="form-control"
								name="truename"
								placeholder="admin" />
						</div>
						<button
							type="submit"
							class="btn btn-primary"  id="findUsernameBtn"><span class="glyphicon glyphicon-search"></span>&nbsp;查询</button>
						</form>
						<div id="findUsernamePanel"  class="alert alert-info" role="alert"></div>
				</fieldset>
			</div>
		</div>
	</div>
</body>
</html>